body{
    margin:0;
    padding:0;
    background:#ccc;
}
.container{
    position: fixed;
    top:40%;
    left:0;
    z-index:9999;
    border-radius:0 6px 6px 0;
}
.father{
    position:relative;
    cursor: pointer;
    
}
.father i{
    display: block;
    width:60px;
    height:60px;
    text-align:center;
    line-height:60px;
    font-size:30px;
    background:#fff;
    transition:.6s;
}
.first{
    border-radius:0 10px 0 0;
}
.last{
    border-radius:0 0 10px 0;
}
.father i:hover{
    color:blue;
    transform: scale(1.4);
}
.son{
    position:absolute;
    top:0;
    left:-340px;
    height:60px;
    width:300px;
    line-height:60px;
    transition:.6s;
    z-index:-1;
    background:#000;
    color:#fff;
    padding-left:90px;
    font-weight: 700;
    border-radius: 120px 0;
}

.father:hover .son{
    left:10px;
}